<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddUIMarker.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            let marker = new maptalks.ui.UIMarker(map.getCenter(), {
                "draggable": true,
                "single": false,
                "content": "<div class='img-marker'></div>"
            }).addTo(map).show();
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style lang="less">
.img-marker {
    content: url("/maptalks-test/images/hanxue.png");
    object-fit: cover;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
}
</style>
